import React, {Component} from 'react';

import {
    View, Text, Dimensions, Image, TouchableOpacity,
    StyleSheet
} from 'react-native';

import Badge from 'antd-mobile-rn/lib/badge'

const {width, height} = Dimensions.get('window')

class MenuItem extends Component {

    render() {
        const {img, title, page} = this.props;
        return (
            <TouchableOpacity style={{height: width / 3, flex: 1}} onPress={() => this.props.navigation.navigate(page)}>

                <View style={{
                    height: width / 3,
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flex: 1
                }}>
                    <View style={{flex: 0}}>
                        {
                            this.props.Badge ?

                                <Badge text={this.props.Badge} overflowCount={10}>
                                    <Image source={img}
                                           style={{width: width / 6, height: width / 6, resizeMode: 'contain'}}/>
                                </Badge>
                                :
                                <Image source={img}
                                       style={{width: width / 6, height: width / 6, resizeMode: 'contain'}}/>
                        }

                    </View>

                    <View style={{flex: 0, alignItems: 'flex-start', justifyContent: 'flex-start'}}>
                        <Text style={styles.txtStyle}>{title}</Text>
                    </View>

                </View>

            </TouchableOpacity>
        );
    }

}

const styles = StyleSheet.create({
    txtStyle: {
        color: 'blue',
    }
});

export default MenuItem;